<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>super关键字</title>
</head>
<body>
    <h1>super关键字</h1>
    <h2>super既可以当作函数使用，也可以当作对象使用</h2>

    <script>
        // 作为函数调用
        class A {
            constructor() {
                console.log(new.target.name);
            }
        }

        class B extends A {
            constructor() {
                super();
            }
        }

        new A(); // A
        new B(); // B

        // 作为对象使用
        class Parent {
            foo() {
                return 'foo in Parent';
            }
            static staticMethod() {
                return 'parent static method';
            }
        }

        class Child extends Parent {
            foo() {
                return super.foo() + ' and Child';
            }
            static staticMethod() {
                return super.staticMethod() + ' and child';
            }
        }

        const child = new Child();
        console.log(child.foo()); // "foo in Parent and Child"
        console.log(Child.staticMethod()); // "parent static method and child"

        // 实际应用：UI组件继承
        class Component {
            constructor(props = {}) {
                this.props = props;
            }

            init() {
                console.log('Component initialized');
            }

            render() {
                throw new Error('Must implement render');
            }
        }

        class Button extends Component {
            constructor(props) {
                super(props);
                this.state = { clicked: false };
            }

            init() {
                super.init();
                console.log('Button initialized');
            }

            render() {
                return `<button class="${this.props.className || ''}">${this.props.text}</button>`;
            }
        }

        const button = new Button({ text: '点击', className: 'primary' });
        button.init();
        console.log(button.render());
    </script>
</body>
</html> 